<template>
  <div class="detail_box">
    <div class="detail">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="top" style="margin-left: 20px;">
        <el-row :gutter="22">
          <el-col :span="11"> 
            <el-form-item label="工程名称" prop="name">
              <el-input
                v-model="temp.name"
                placeholder="请输入工程名称" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="交底单编号" prop="code1">
              <el-input
                v-model="temp.code1"
                placeholder="请输入交底单编号" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11"> 
            <el-form-item label="工程票编号" prop="code2">
              <el-input
                v-model="temp.code2"
                placeholder="请输入工程票编号" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="11"> 
            <el-form-item label="工作地点" prop="address">
              <el-input
                v-model="temp.address"
                placeholder="请输入工作地点" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="工作负责人" prop="leader">
              <el-select style="width:100%" filterable clearable v-model="temp.leader" placeholder="请选择">
                <user-option></user-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="计划作业时间" prop="date">
              <el-date-picker
                style="width:100%"
                v-model="temp.date"
                size="small"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="施工人数(不包括工作负责人)" prop="count">
              <el-input
                v-model="temp.count"
                placeholder="请输入施工人数"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="施工人数(不包括工作负责人)" prop="count">
              <el-input
                v-model="temp.count"
                placeholder="请输入施工人数"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="工作任务" prop="workTasks">
              <el-input
                type="textarea"
                :rows="3"
                v-model="temp.workTasks"
                placeholder="请输入工作任务"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="人员分工" prop="divideWork">
              <el-input
                type="textarea"
                :rows="3"
                v-model="temp.divideWork"
                placeholder="请输入工作任务"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="工作简图" prop="workImg">
              <el-upload
                class="upload-demo"
                action=""
                :on-remove="handleRemove"
                :before-upload="beforeAvatarUpload"
                :http-request="handleUpload"
                :on-success="handleSuccess"
                :limit="5"
                :on-exceed="handleExceed"
                :file-list="temp.workImg">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传文件或者图片，且不超过20mb</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-button type="primary" @click="submit()">发起审批</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div> 
</template>
<script>
import UserOption from '@/components/selectOption/users'
export default {
  name: "editDetail",
  props:{
    workId:{
      type: Number
    }
  },
  components: {
    UserOption
  },
  data() {
    return {
      temp: {
        id: null,
        name: 'xxx工程',
        code1: '',
        code2: '',
        address: '',
        date: [],
        leader: null,
        count: '',
        workTasks: '',
        divideWork: '',
        workImg: [],
      },
      rules: {
        name: [
          { required: true, message: '工程名称不能为空', trigger: 'blur'}
        ],
        code1: [
          { required: true, message: '交底单编号不能为空', trigger: 'blur'}
        ],
        code2: [
          { required: true, message: '工作票编号不能为空', trigger: 'blur'}
        ],
        address: [
          { required: true, message: '作业地点不能为空', trigger: 'blur'}
        ],
        leader: [
          { required: true, message: '请选择工作负责人', trigger: 'blur'}
        ],
        count: [
          { required: true, message: '施工人数不能为空', trigger: 'blur'}
        ],
        workTasks: [
          { required: true, message: '工作任务不能为空', trigger: 'blur'}
        ],
        divideWork: [
          { required: true, message: '人员分工不能为空', trigger: 'blur'}
        ],
        date: [
          { type: 'array', required: true, message: '请选择计划作业时间' }
        ],
        workImg: [
          { type: 'array', required: true, message: '请上传图片/文件' }
        ],
      }
    };
  },
  created() {
    
  },
  mounted() {
    
  },
  methods: {
    submit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.active = 3
        }
      })
    },

    //图片上传
    handleUpload(option) {
      this.$ossUpload({
        path: option.file.name,
        file: option.file,
        folder: "ticket",
        done: res => {
          let fileUrl = res.res.requestUrls[0].split("?")[0];
          console.log(fileUrl)
          option.onSuccess(fileUrl)
        },
        fail: err => {
          console.log(err)
        }
      });
    },
    handleRemove(file, fileList) {
      this.temp.drawings = fileList
    },
    handleSuccess(res, file, fileList) {
      fileList.forEach(item => {
        if(item.uid === file.uid) item.url = res
      });
      this.temp.drawings = fileList;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeAvatarUpload(file) {
      const isLt20M = file.size / 1024 / 1024 < 20;
      if (!isLt20M) {
        this.$message.error('上传文件/图片大小不能超过 20MB!');
      }
      return isLt20M;
    },

  }
};
</script>
<style scoped="scoped" lang="scss">
.upd-btn {
  position: absolute;
  right: 30px;
  top: 0px;
}
.c-title {
  color: #999999;
}
h4 {
  color: #666666;
  font-weight: normal;
}
.detail_box {
  padding: 0px 20px 40px 20px;
  .detail {
    font-size: 15px;
    .content {
      white-space: pre-wrap;
    }
  }
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0 !important;
}
</style>

